<template>
  <view class="page-container">
    <!-- 维修信息卡片 -->
    <view class="info-card">
      <view class="card-header">维修信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">维修单号：</text>
          <text class="value">{{ taskData.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">车主姓名：</text>
          <text class="value">{{ taskData.member.memberName }}</text>
        </view>
       <view class="info-item clickable" @click="handlePhoneCall">
          <uni-icons type="phone" size="18" color="#007AFF" />
          <text class="value">{{ taskData.member.phone }}</text>
        </view>
        <view class="info-item">
          <text class="label">维修方式：</text>
          <text class="value-tag" :class="taskData.maintenanceMethod === 0 ? 'shop' : 'pickup'">
            {{ repairMethodMap[taskData.maintenanceMethod] }}
          </text>
        </view>
        <view class="info-item clickable" @click="handleViewLocation">
          <uni-icons type="location" size="18" color="#007AFF" />
          <text class="value">{{ taskData.pickupLocation }}</text>
        </view>
        <view class="info-item">
          <text class="label">预约时间：</text>
          <text class="value">{{ formatTime(taskData.appointmentDate) }}</text>
        </view>
        <view class="info-item">
          <text class="label">提交时间：</text>
          <text class="value">{{ formatTime(taskData.submitDate) }}</text>
        </view>
      </view>
    </view>

    <!-- 车辆信息卡片 -->
    <view class="info-card">
      <view class="card-header">车辆信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">车辆类型：</text>
          <text class="value">{{ taskData.vehicleType }}</text>
        </view>
        <view class="info-item">
          <text class="label">车牌号码：</text>
          <text class="value">{{ taskData.licensePlate }}</text>
        </view>
        <view class="info-item image-item">
          <text class="label">整车照片：</text>
          <image 
            :src="taskData.vehicleImage" 
            mode="aspectFill"
            class="vehicle-image"
          />
        </view>
        <view class="info-item image-item">
          <text class="label">维修部位：</text>
          <scroll-view class="image-grid" scroll-x>
            <image 
              v-for="(img, index) in repairImages" 
              :key="index"
              :src="img" 
              mode="aspectFill"
              class="repair-image"
            />
          </scroll-view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-bar">
      <button 
        class="confirm-btn"
        :class="{ arrived: isArrived }"
        :disabled="isArrived"
        @click="handleConfirmArrival"
      >
        {{ isArrived ? '已到场' : '确认到场' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { dayjs } from '@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js'
import request from '../../utils/request';
// 任务数据
// 任务数据
const taskData = ref([]);
// 维修方式映射
const repairMethodMap = {
  0: '到店维修',
  1: '上门取车'
}

// 维修部位照片列表
const repairImages = computed(() => {
  return [taskData.value.partImage1, taskData.value.partImage2].filter(Boolean)
})

// 是否已到场
const isArrived = ref(false)

// 时间格式化
const formatTime = (timestamp) => {
  return dayjs(timestamp).format('YYYY/MM/DD HH:mm')
}

// 电话拨打
const handlePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: taskData.value.member.phone
  })
}

// 查看位置
const handleViewLocation = () => {
  uni.openLocation({
    address: taskData.value.pickupLocation,
    success: () => console.log('位置打开成功')
  })
}

// 确认到场
// 确认到场
const handleConfirmArrival = async () => {
  uni.showModal({
    title: '确认操作',
    content: '确认车主已到达现场吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用接口，修改维修记录状态
          const response = await request({
            url: '/mstore/maintenanceRecord',
            method: 'PUT',
             params: { // 通过 params 传递参数
                          recordId: taskData.value.id, // 传入当前维修记录的 recordId
                          recordStatus: 1, // 将 recordStatus 修改为 1
                        },
          });

          // 判断接口返回的 code 是否为 200
          if (response.code == 200) {
            uni.showToast({ title: '核销成功' });
            isArrived.value = true; // 更新到场状态
          } else {
            uni.showToast({ title: '操作失败，请重试', icon: 'none' });
          }
        } catch (err) {
          console.error('接口调用失败:', err);
          uni.showToast({ title: '网络错误，请重试', icon: 'none' });
        }
      }
    },
  });
};

// 使用 onMounted 获取路由参数
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options

  if (options.taskData) {
    const taskDataStr = decodeURIComponent(options.taskData)
    taskData.value = JSON.parse(taskDataStr)
    console.log('接收到的任务数据:', taskData.value)
  } else {
    console.log('未接收到任务数据')
  }
})
</script>

<style lang="scss" scoped>
.page-container {
  padding: 24rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-header {
    padding: 24rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    border-bottom: 2rpx solid #f0f0f0;
  }
}

.info-list {
  padding: 24rpx;

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
      min-width: 140rpx;
      margin-right: 24rpx;
    }

    .value {
      color: #333;
      flex: 1;
    }

    .value-tag {
      display: inline-block;
      padding: 8rpx 24rpx;
      border-radius: 32rpx;
      font-size: 24rpx;

      &.shop {
        background: #e8f4ff;
        color: #007AFF;
      }

      &.pickup {
        background: #f0f4ff;
        color: #5856D6;
      }
    }

    &.clickable {
      padding: 16rpx;
      border-radius: 8rpx;
      transition: background-color 0.2s;

      &:active {
        background-color: #f8f8f8;
      }
    }
  }

  .image-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16rpx;

    .vehicle-image {
      width: 100%;
      height: 400rpx;
      border-radius: 12rpx;
    }

    .image-grid {
      white-space: nowrap;
      width: 100%;

      .repair-image {
        width: 300rpx;
        height: 200rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

.action-bar {
  position: sticky;
  bottom: 0;
  padding: 24rpx;
  background: linear-gradient(transparent, #f5f5f5 50%);

  .confirm-btn {
    background: #007AFF;
    color: #fff;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;

    &[disabled] {
      background: #e0e0e0 !important;
      color: #999 !important;
    }

    &.arrived {
      background: #34C759;
    }

    &::after {
      border: none;
    }
  }
}
</style>